<template>
    <u-popup v-model="isShow" mode="right" width="60%" closeable>
        <view class="mx-4">
            <view class="title">活动方式</view>
            <view class="bd">
                <u-button type="default" size="mini" class="mr-2" @click="handleSelect('activitiesMethod', null)">全部</u-button>
                <u-button v-for="(item,index) in optionData.activitiesMethod" :key="index" :custom-style="{marginBottom:'20rpx'}" class="mr-2" :class="form.activitiesMethod == item.id ? 'btn-cyan' : ''" type="default" size="mini" @click="handleSelect('activitiesMethod', item.id)">{{ item.name }}</u-button>
            </view>
            <view class="title">活动类别</view>
            <view class="bd">
                <u-button type="default" size="mini" class="mr-2" @click="handleSelect('activityType', null)">全部</u-button>
                <u-button v-for="(item,index) in optionData.activityType" :key="index" :custom-style="{marginBottom:'20rpx'}" class="mr-2" :class="form.activityType == item.id ? 'btn-cyan' : ''" type="default" size="mini" @click="handleSelect('activityType', item.id)">{{ item.name }}</u-button>
            </view>
            <view class="title">分会</view>
            <view class="bd">
                <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
                    <u-button type="default" size="mini" class="mr-2" @click="handleSelect('guildId', null)">全部</u-button>
                    <u-button v-for="(item,index) in optionData.guildList" :key="index" :custom-style="{marginBottom:'20rpx'}" class="mr-2" :class="form.guildId == item.id ? 'btn-cyan' : ''" type="default" size="mini" @click="handleSelect('guildId', item.id)">{{ item.name }}</u-button>
                </scroll-view>
            </view>
        </view>
	</u-popup>
</template>
<script setup lang="ts">
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['confirm']);
import { useOptionData } from '@/stores/optionData';
const optionDataStore = useOptionData();
let isShow = ref(false);
let form = reactive({
    activitiesMethod: null,
    activityType: null,
    guildId: null,
})
let optionData = reactive({});
const getInitData = async () => {
    optionData.activitiesMethod = await optionDataStore.getDictList('activitie_method');
    optionData.activityType = await optionDataStore.getDictList('activitie_type');
    let guildList = await proxy.$http('get', '/admin/guilds/getGuildsList', {});
    optionData.guildList = proxy.$util.transformArray(guildList, 'guildId', 'guildName');
    console.log(optionData.guildList)
}
const init = () => {
    getInitData();
    isShow.value = true;
};
const handleSelect = (type, id)=>{

    form[type] = id;
    console.log(form);
    emit('confirm', form);
}
defineExpose({
  init,
})
</script>
<style scoped>
.title{
    margin-bottom:20rpx;
}
.bd{margin-bottom:30rpx;}
.mr-2{
    margin-bottom:10rpx;
}
.scroll-Y{
    height:400rpx;
    width: auto;
}
</style>